<template>
    <div class="ratingselect">
        <div class="rating-type border-1px">
            <span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}
                <span class="count">{{ratings.length}}</span>
            </span>
            <span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">{{desc.positive}}
                <span class="count">{{positives.length}}</span>
            </span>
            <span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">{{desc.negative}}
                <span class="count">{{negatives.length}}</span>
            </span>
        </div>
        <div class="switch border-1px" @click="toggleContent">
            <span class="icon-check_circle" :class="{'only-content': onlyContent}"></span>
            <span class="text">只看有内容的评价</span>
        </div>
    </div>
</template>

<script>
const POSITIVE = 0;
const NEGATIVE = 1;
const ALL = 2;

export default {
    name: 'ratingselect',
    props: {
        ratings: {
            type: Array,
            default() {
                return [];
            }
        },
        selectType: {
            type: Number,
            default: ALL
        },
        onlyContent: {
            type: Boolean,
            default: true
        },
        desc: {
            type: Object,
            default() {
                return {
                    all: '全部',
                    negative: '不满意',
                    positive: '满意'
                };
            }
        }
    },
    methods: {
        select(type, event) {
            if (!event._constructed) {
                return;
            }

            this.$emit('select', type);
        },
        toggleContent(event) {
            if (!event._constructed) {
                return;
            }
            this.$emit('toggle');
        }
    },
    computed: {
        positives() {
            return this.ratings.filter((rating) => {
                return rating.rateType === POSITIVE;
            });
        },
        negatives() {
            return this.ratings.filter((rating) => {
                return rating.rateType === NEGATIVE;
            });
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../common/styles/mixin.less";

.ratingselect {
    .rating-type {
        margin: 0 18px;
        padding: 18px 0;
        font-size: 0;
        .border-1px(rgba(7, 17, 27, 0.1));
        .block {
            display: inline-block;
            padding: 8px 12px;
            font-size: 12px;
            line-height: 16px;
            margin-right: 8px;
            border-radius: 1px;
            &.positive {
                background: rgba(0, 160, 220, 0.2);
                &.active {
                    background: #00a0dc;
                    color: #fff;
                }
            }
            &.negative {
                background: rgba(77, 85, 93, 0.2);
                &.active {
                    background: #4d555d;
                    color: #fff;
                }
            }
        }
        .count {
            margin-left: 2px;
            font-size: 8px;
        }
    }
    .switch {
        padding: 12px 18px;
        font-size: 0;
        .border-1px(rgba(7, 17, 27, 0.1));
        .icon-check_circle {
            display: inline-block;
            font-size: 24px;
            line-height: 24px;
            color: rgb(147, 153, 159);
            margin-right: 4px;

            &.only-content {
                color: #00c850;
            }
        }
        .text {
            display: inline-block;
            vertical-align: top;
            font-size: 12px;
            line-height: 24px;
            color: rgb(147, 153, 159);
        }
    }
}
</style>
